<template>
	<el-container>
		<el-header>
			<el-input v-model="templateData.CtrlC" placeholder="请输入内容" size="small"></el-input>
			<el-button type="primary" size="mini" @click="copyMethod('Original', templateData.CtrlC)">复制</el-button>
		</el-header>
		<el-main>
			<el-input v-model="templateData.CtrlV" type="textarea" placeholder="请输入内容"></el-input>
		</el-main>
	</el-container>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
	name: 'clipboard',
	setup() {
		const templateData = reactive({
			CtrlC: '定海神针',
			CtrlV: '',
		})

		const copyMethod = (type: string, text: string) => {
			// 原生方法
			let copyText = document.createElement('input')
			copyText.value = text
			document.body.appendChild(copyText)
			copyText.select()
			document.execCommand('copy', false, text)
			copyText.remove()
			ElMessage({ type: 'success', message: '复制成功' })
		}

		return {
			templateData,
			copyMethod,
		}
	},
})
</script>
<style lang="scss" scoped src='./index.scss'>
</style>